<template>
  <div class="wrapper bg-f" v-if="!ENV.app&&messagelist">
    <div class="message-board" v-if="messagelist.length > 0">
      <div class="board-top">
        <span class="title" id="title">精彩留言</span>
        <span class="write-message" @click="writeMessage('comment', $route.params.id)">写留言</span>
      </div>
      <div class="message-list" v-for="(item, index) in messagelist" :key="index">
        <div class="message-info box box-lr">
          <div class="avater" v-if="item.user">
            <img v-lazy="fileUrlParse(item.user.attributes.roster.avatar) || fileUrlParse(item.user.avatar)" alt="">
          </div>
          <div class="info-ceil box box-tb">
            <span class="name">{{ item.user.attributes.roster.name || item.user.fullname }}</span>
            <span class="time">{{dateFromNow(item.long_create_time)}}</span>
          </div>
          <!-- 回复补丁 -->
          <div class="response box box-lr box-center-center" @click="writeMessage('reply', item.commentid)">
            <span class="res-icon icon-width"></span>
            <span class="res-count">{{ item.replyNumber }}</span>
          </div>
          <!-- 点赞补丁 -->
          <div class="support" @click="support($event, item.subjectid, item.commentid, item.like)">
            <img class="support icon-width" src="">
          </div>
        </div>
        <!-- 回复内容 -->
        <div class="message-content">
          {{ item.content }}
        </div>
        <div class="message-replay" v-if="item.replyNumber > 0">
          <div class="replay" v-for="(commentItem, commentIndex) in item.sonList" v-if="commentIndex <= 3" :key="commentIndex">
            <span>{{ commentItem.user.fullname }}：</span>
            <span class="replay-content">{{ commentItem.content }}</span>
          </div>
          <!-- 更多回复补丁 -->
          <div class="replay-total" v-if="item.replyNumber > 3" @click="downApp('more_reply')">
            <span>共{{ item.replyNumber }}条回复</span>
            <span class="right-icon"></span>
          </div>
        </div>
      </div>
      <div class="more-comment" @click="downApp('more_message')">点击查看更多评论<span></span></div>
    </div>
    <div class="no-draft" v-else>
      <span class="text">暂无留言，赶紧留言吧~</span>
      <span class="write" @click="writeMessage('comment', $route.params.id)">写留言</span>
    </div>
    <login-pop ref="login" :isFrom="'messagelist'"></login-pop>
  </div>
</template>

<script>
  import baseUrl from '../config/index'
  import LoginPop from './login'
  import {
    mapState,
    mapActions
  } from 'vuex';
  import {
    makeFileUrl,
    dateFormat,
    dateFromNow,
    down_statistics
  } from '../utils'
  export default {
    name: 'wrapper',
    components: {
      LoginPop
    },
    data() {
      return {
        pagenum: 1,
        pagesize: 5,
      }
    },
    beforeMount() {
      let code = this.$route.query.code
      if (this.$route.params.id) {
        this.getCommentsList({
          "subjectid": this.$route.params.id,
          "pagenum": this.pagenum,
          "pagesize": this.pagesize
        })
      }
    },
    mounted() {
      console.log('this.res--', this.res)
      // if (this.$route.query.code) {
      //   let params = {
      //     plateform: 2,
      //     code: this.$route.query.code,
      //     protocol: "WEB_SOCKET",
      //     adid: Cookies.get('h5Adid') || 'closer-t1'
      //   }
      //   console.log('params---', params)
      //   this.getUserInfoWithWx(params)
      // }
    },
    computed: {
      ...mapState([
        'res',
        'content'
      ]),
      ...mapState("common", {
        messagelist: state => state.messagelist,
      })
    },
    methods: {
      ...mapActions("common", [
        "getCommentsList",
        "checkIsLike",
        "getWxAuth",
        "getUserInfoWithWx"
      ]),
      fileUrlParse(url, type, size) {
        return makeFileUrl(url, type, size);
      },
      dateFromNow(time) {
        return dateFromNow(time)
      },
      writeMessage(_type, id) {
        down_statistics({
          'store': this.$store,
          'route': this.$route,
          'str':'message',
          "defaultStr": '',
          'redirectUrl':'wx'
        });
        // 渲染页面前 先判断cookies user是否存在
        console.log('Cookies--', Cookies.get("token"))
        if (this.res.int_type === 2) {
          window.sessionStorage.setItem("title", this.res.title);
        } else {
          window.sessionStorage.setItem("title", this.content.text);
        }
        if (Cookies.get("user")) {
          this.gotoMessage(_type, id);
        } else {
          // 前期 仅微信后期再做微博，qq等授权， 所以在其他浏览器 需使用默认登录
          if (window.ENV.wx) {
            console.log(this.$route.query.code)
            let path;
            if (_type === 'comment') {
              path = '/message/' + this.$route.params.id
            } else {
              path = '/message/' + this.$route.params.id + '/' + id
            }
            if (!this.$route.query.code) {
              this.getWxAuth({
                payload: {
                  path,
                  query: this.$route.query
                }
              })
            }
            // let url;
            // if (type === "comment") {
            //   url = `${location.protocol}//${
            //         location.hostname
            //       }/message/${id}`;
            // } else {
            //   url = `${location.protocol}//${location.hostname}/message/${
            //         this.$route.params.subjectid
            //       }/${id}`;
            // }
          } else {
            this.gotoMessage(_type, id)
          }
        }
        
      },
      // 前往写留言
      gotoMessage(_type, id) {
        let { type, category } = this.$route.query
        if (_type === "comment") {
          this.$router.push({
            path: `/message/${id}`,
            query: {
              type: type,
              category: category
            }
          });
        } else {
          this.$router.push({
            path: `/message/${this.$route.params.id}/${id}`,
            query: {
              type: type,
              category: category
            }
          });
        }
      },
  
      // 先登录，在下载流程
      downApp(str) {
       let redirectUrl = baseUrl.download;
        down_statistics({
          'store': this.$store,
          'route': this.$route,
          str,
          "defaultStr": '',
          redirectUrl
        });
      },
      support(e, subjectid, commentid, isLike) {
         down_statistics({ //不跳下载
          'store': this.$store,
          'route': this.$route,
          'str':'message_like',
          "defaultStr": '',
          'redirectUrl': 'wx'
        });
        let params = {
          subjectid: subjectid,
          commentid: commentid,
          flag: isLike
        }
        this.checkIsLike(params)
        e.target.src = "";
      }
    }
  };
</script>
 
<style lang="less" scoped>
  .wrapper {
    width: 100%;
    height: 100%;
    border-bottom: 20pr solid #f1f1f1;
    .message-board {
      color: #4b4945;
      background: #fff;
      font-size: 32pr;
      line-height: 44pr;
      .board-top {
        padding: 20pr 40pr;
        .write-message {
          float: right;
          color: #507CAF;
        }
      }
      .message-list {
        padding: 30pr 40pr 20pr 40pr;
        .message-info {
          position: relative;
          font-size: 28pr;
          line-height: 40pr;
          .avater {
            width: 72pr;
            height: 72pr;
            border-radius: 72pr;
            background: #fff;
            overflow: hidden;
            >img {
              width: 100%;
            }
          }
          .info-ceil {
            margin-left: 20pr;
            .time {
              font-size: 24pr;
              line-height: 34pr;
              color: #94928E;
            }
          }
          .icon-width {
            display: inline-block;
            width: 30pr;
            height: 28pr;
          }
          .response {
            position: absolute;
            right: 64pr;
            color: #94928E;
            .res-icon {
              background: url('../assets/images/message.png') no-repeat center;
              background-size: cover;
            }
            .res-count {
              margin-left: 10pr;
            }
          }
          .support {
            position: absolute;
            right: 0;
          }
        }
        .message-content {
          font-size: 28pr;
          line-height: 50pr;
          color: #4b4945;
          margin: 20pr 0 20pr 82pr;
        }
        .message-replay {
          padding: 12pr 22pr 10pr 20pr;
          background: #F8F8F8;
          margin-left: 80pr;
          font-size: 28pr;
          .replay-total {
            font-size: 28pr;
            line-height: 40pr;
            color: #507CAF;
            .right-icon {
              display: inline-block;
              margin-left: 10pr;
              width: 10pr;
              height: 17pr;
              background: url('../assets/images/back@2x.png') no-repeat center;
              background-size: cover;
            }
          }
        }
      }
      .more-comment {
        border-top: 1px solid #EAEAEA;
        padding: 20pr 0;
        text-align: center;
        color: #507CAF;
        >span {
          display: inline-block;
          margin-left: 20pr;
          width: 18pr;
          height: 18pr;
          background: url('../assets/images/shape2.png') no-repeat center;
          background-size: cover;
        }
      }
    }
    .no-draft {
      background: #fff;
      padding: 20pr 24pr;
      font-size: 32pr;
      line-height: 44pr;
      .write {
        float: right;
        color: #507CAF;
      }
    }
  }
</style>


